/*
 * @Author: llixxm
 * @Date: 2021-05-28 10:07:58
 * @Description: 上下拖拽组件
 */
import React, { Component } from 'react';
import {viewModel } from "nc-lightapp-front";
let { getGlobalStorage } = viewModel;
require('./index.less');

export default class DragHeightCom extends Component {
    constructor(props) {
        super(props);
        this.mouseDown = false;
    }
    static defaultProps = {
        defBottomHeight: '30px', //底部区域默认高度
        bottomMinHeight: '30px', //底部最小高度
    };

    bindBottomDOM = dom => {
        this.divDom = dom;
    }
    
    componentDidMount() {
        if (this.divDom) {
            this.clientHei = this.divDom.clientHeight;
        }
        
        this.divDom.style.height=this.props.defBottomHeight;
        
        this.onMouseDown.call(this);
    }

    onMouseDown() {
        document.addEventListener('mousemove', e => {
            //e.stopPropagation();
            if (this.mouseDown && this.divDom) {
                // fix bug  IE  e.x !== e.clientx  ie  
                let height = this.clientHei - (e.clientY - this.beginY);
                if (height >= this.box.clientHeight - 20) { // || height <= 50
                    this.divDom.style.height = this.divDom.clientHeight + 'px';
                } else {
                    this.divDom.style.height = height + 'px';
                }
            }
        });

        document.addEventListener('mouseup', () => {
            if (this.mouseDown) {
                this.mouseDown = false;
                if (this.divDom) {
                    this.clientHei = this.divDom.clientHeight;
                    if(this.props.voucherTable){
                        this.props.voucherTable.setTableHeight();
                    }
                    if(this.props.voucherTable){
                        this.props.voucherTable.bottomHeight(this.clientHei);
                    }
                    if(this.props.setTableBodyHeight){
                        this.props.setTableBodyHeight(false,true);
                    }
                }
                this.maskBottomDom && (this.maskBottomDom.style.display = 'none');
                this.maskTopDom && (this.maskTopDom.style.display = 'none');
    
                typeof this.props.onDragStop === 'function' && this.props.onDragStop(this.divDom?this.divDom.style.height : '');
            }
        });

        this.spanDom.addEventListener('mousedown', e => {
            this.beginY = e.clientY;
            this.mouseDown = true;
            // 加个遮罩 应对  iframe的情况
            this.maskBottomDom && (this.maskBottomDom.style.display = 'block');
            this.maskTopDom && (this.maskTopDom.style.display = 'block');
        });
    }

    render() {
        let bottomHeight = this.props.defBottomHeight; 
        let bottomMinHeight = this.props.bottomMinHeight;
        return (
            <div
                className="dragHeightCom nc-theme-area-bgc"
                ref={box => { this.box = box; }}
            >
                <div className="dragHeightCom-top">
                    <div className="dragHeightCom-mask" ref={mask => { this.maskTopDom = mask; }} />
                    {this.props.topDom}
                </div>
                <div
                    ref={span => { this.spanDom = span; }}
                    className="dragHeightCom-line nc-theme-area-split-bc nc-theme-area-bgc"
                >
                    <div className="dragHeightCom-lines" />
                </div>
                <div 
                    className="dragHeightCom-bottom" 
                    style={{ height: bottomHeight, minHeight: bottomMinHeight }}
                    ref={this.bindBottomDOM}
                >
                    <div className="dragHeightCom-mask" ref={mask => { this.maskBottomDom = mask; }} />
                    {this.props.bottomDom}
                </div>
            </div>
        );
    }
}
